<template>
  <div>
    <a-form-model
      ref="form"
      :model="model"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol">

      <a-form-model-item
        label="ID"
      >
        <a-input
          :value="model.id"
          disabled
        ></a-input>
      </a-form-model-item>

      <a-form-model-item
        label="权限标签"
        prop="label"
        hasFeedback
      >
        <a-input
          v-model="model.label"
          placeholder="权限可识别的名称"
        ></a-input>
      </a-form-model-item>

      <a-form-model-item
        label="唯一CODE"
        prop="code"
        hasFeedback
      >
        <a-input
          v-model="model.code"
          placeholder="最长50个字符"
          :max-length="50"
        />
      </a-form-model-item>

      <a-form-model-item
        label="分组名字"
        prop="groupName"
        hasFeedback
      >
        <a-input v-model="model.groupName" placeholder="最长20个字符" :max-length="20"/>
      </a-form-model-item>

      <a-form-model-item
        label="类型"
        prop="type"
        hasFeedback
      >
        <a-select v-model="model.type" default-value="ANYWHERE">
          <a-select-option value="ANYWHERE">任意权限</a-select-option>
          <a-select-option value="MENU_ACTION">菜单操作</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item
        label="描述"
        prop="description"
        hasFeedback
        help="描述最多100个字"
      >
        <a-textarea v-model="model.description" :max-length="100" :rows="5" placeholder="..."/>
      </a-form-model-item>

      <a-form-model-item
        v-bind="buttonCol"
      >
        <a-row>
          <a-col span="6">
            <a-button type="primary" html-type="submit" @click="handleSubmit">提交</a-button>
          </a-col>
          <a-col span="10">
            <a-button @click="handleGoBack">返回</a-button>
          </a-col>
          <a-col span="8"></a-col>
        </a-row>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import moment from 'moment'
import pick from 'lodash.pick'
import PermissionAPI from '@/api/permission'

export default {
  name: 'TableEdit',
  props: {
    record: {
      type: [Object, String],
      default: ''
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      buttonCol: {
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 5 }
        }
      },
      model: {
        id: null,
        label: '',
        code: '',
        type: null,
        groupName: '',
        description: ''
      },
      rules: {
        label: [{ required: true, message: '此项必填' }],
        code: [{ required: true, message: '此项必填' }],
        type: [{ required: true, message: '此项必填' }]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.loadEditInfo(this.record)
    })
  },
  methods: {
    handleGoBack () {
      this.$emit('onGoBack')
    },
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', this.model)
          PermissionAPI.save(this.model).then(res => {
            this.model = Object.assign({}, res)
          })
        }
      })
    },
    handleGetInfo () {
    },
    loadEditInfo (data) {
      const { form } = this
      // ajax
      console.log(`将加载 ${this.id} 信息到表单`)
      new Promise((resolve) => {
        setTimeout(resolve, 1500)
      }).then(() => {
        const formData = pick(data, ['label', 'code', 'type', 'groupName', 'description'])
        formData.updatedAt = moment(data.updatedAt)
        console.log('formData', formData)
        form.setFieldsValue(formData)
      })
    }
  }
}
</script>
